<template>
    <div>
        <upNavbar :title="''" :bgColor="'#fff'" :rightIcon="'trash-fill'" @rightClick="handleRightClick"></upNavbar>
        <div class="bodyBox">
            <up-swiper :list="swiperList" indicator indicatorMode="line" circular :indicatorStyle="'dot'"
                height="1250rpx"></up-swiper>
            <div class="textBox">
                <h4>{{ postData.funplay_title }}</h4>
                <div class="timeAndView">
                    <span>{{ formatDate(postData.add_time) }}</span>
                    <span> 广东</span>
                </div>
                <div class="content">
                    <span>{{ postData.funplay_content }}</span>
                </div>
                <div class="btnList">
                    <!-- <image :src="isXingActive ? '/static/images/xingxing2.png' : '/static/images/xingxing.png'"
                        @click="headleXing"></image>
                    <span class="liteText">123</span> -->
                    <image :src="isXinActive ? '/static/images/xinxin2.png' : '/static/images/xinxin.png'"
                        @click="headleXin"></image>
                    <span class="liteText" @click="headleXin">{{ postData.likes }}</span>
                </div>
            </div>
            <div class="commentBox plBox">
                <span class="commentBoxText">
                    评论({{ 231 }})
                </span>
                <!-- <u-sticky bgColor="#fff">
                    <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
                        @click="tabsClick"></u-tabs>
                </u-sticky> -->
            </div>
            <div class="commentArea">
                <comment-section />
            </div>
            <!-- <div class="commentBox" v-if="showRelevanTontent">
                <span class="commentBoxText">
                    相关内容
                </span>
                <u-sticky bgColor="#fff">
                    <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list2"
                        @click="tabsClick2"></u-tabs>
                </u-sticky>
                <div class="imgList">
                    <div class="gridItemBox" v-for="(listItem, listIndex) in gridList" :key="listIndex">
                        <div class="liteBox">
                            <image class="image" src="@/static/logo.png" alt="" />
                            <span class="liteText">{{ listItem.text }}</span>
                            <div class="liteFootle">
                                <image class="fontImg" src="@/static/images/xin.png" alt="" />
                                <span>{{ listItem.likeNum }}</span>
                                <span class="liteTitle">{{ listItem.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="footer" style="width: 100%;height: 76rpx;"></div>
        </div>
        <upModal :modalShow="modalShow" :modalText1="'是否删除？'" :showImage="false" :isCancel="true"
            @cancel="modalShow = false" @cloos="cloos"></upModal>
    </div>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue'
import { funpaly, funpalyDel } from '@/api/index/index.js'
import { funpalyLike } from '@/api/index/index.js'
import upNavbar from '../../components/upNavbar.vue';
import upModal from '../../components/upModal.vue';
import CommentSection from '../../components/comment.vue'
const gridList = ([
    {
        text: 'photo示例文字photo示例文字photo示例文字示例文字photo示例文字photo示例文字',
        title: '图片',
        likeNum: 201,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 205,
    },
    {
        text: 'photo',
        title: '图片',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
])
// 处理日期时间
const formatDate = (dateString: string) => {
    if (dateString) {
        const date = new Date(dateString);
        // 获取年、月、日、时、分、秒
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        // 组合成所需的格式
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
}
let postData = ref({})
const swiperList = ref([]);
const modalShow = ref(false)
// 删除
const handleRightClick = () => {
    modalShow.value = true
};
// 弹窗按钮
const cloos = () => {
    modalShow.value = false;
    funpalyDel(postData.value.funplay_code).then((res: any) => {
        if (res.code === 200) {
            uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 2000
            })
            setTimeout(() => {
                uni.navigateBack()
            }, 2000)
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
            })
        }
    })
}
const showRelevanTontent = ref(false)
const list1 = reactive([{ name: '评论' },])
const list2 = reactive([{ name: '相关内容' },])
const tabsData = ref('评论')
const tabsData2 = ref('相关内容')
const tabsClick = (item: any) => {
    tabsData.value = item.name;
}
const tabsClick2 = (item: any) => {
    tabsData2.value = item.name;
}
const isXingActive = ref(false)
const isXinActive = ref(false)
const headleXing = () => {
    isXingActive.value = !isXingActive.value
};
// 点赞按钮
const headleXin = () => {
    funpalyLike(postData.value.funplay_code).then((res: any) => {
        if (res.code == 200) {
            isXinActive.value = !isXinActive.value
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
            })
        }
    })
};
onLoad((options: object) => {
    // console.log("🚀 options.forget:", options.forget)
    if (options.forget) {
        funpaly(options.forget.funplay_code).then((res: any) => {
            if (res.code === 200) {
                swiperList.value = res.data.images_sign
                postData.value = res.data
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                })
            }
        })
    } else {

    }
});
</script>
<style scoped lang="scss">
.bodyBox {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    position: relative;

    .plBox {
        z-index: 99;
    }

    .textBox {
        width: 90%;
        margin: 10rpx auto;

        .timeAndView {
            color: #6C6C6C;
            font-size: 24rpx;
            margin: 6rpx 0;
        }

        .content {
            font-size: 26rpx;
        }

        .btnList {
            width: 100%;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            image {
                width: 35rpx;
                height: 35rpx;
                margin-right: 10rpx;
                margin-left: 50rpx;
            }
        }
    }

    .commentBox {
        width: 100%;
        height: 2.75rem;
        background-color: #EAB3B8;
        border-radius: 15px 15px 0 0;

        .commentBoxText {
            line-height: 2.75rem;
            margin-left: 30rpx;
        }

        // ::v-deep .u-tabs {
        //     width: 100%;
        //     height: 100%;
        // }

        // ::v-deep .u-tabs__wrapper {
        //     background-color: #EAB3B8;
        //     border-radius: 15px 15px 0 0;
        // }

        .imgList {
            width: 100%;
            height: 16.75rem;
            padding-top: 20rpx;
            display: flex;
            flex-direction: row;
            /* 默认就是row，可以不写 */
            overflow-x: auto;
            /* 启用水平滚动 */
            white-space: nowrap;
            /* 防止子元素换行 */

            .gridItemBox {
                width: 45%;
                margin-left: 20rpx;
                padding-top: 15rpx;
                padding-bottom: 5rpx;
                background-color: #fff;
                border-radius: 10px;
                flex: 0 0 auto;

                .liteBox {
                    width: 86%;
                    height: 100%;
                    margin: 0 auto;

                    .liteText {
                        width: 100%;
                        height: 80rpx;
                        display: inline-block;
                        overflow: hidden;
                        word-break: break-all;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                    }

                    .image {
                        width: 290rpx;
                        height: 290rpx;
                    }

                    .liteFootle {
                        width: 100%;
                        margin-top: 10rpx;
                        margin-bottom: 10rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .fontImg {
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }

                        .liteTitle {
                            font-weight: bold;
                            margin-left: auto;
                        }
                    }
                }
            }
        }
    }

    .commentArea {
        width: 100%;
    }
}
</style>